{% extends 'base_no_cart.html' %}
{% load static from staticfiles %}
{% block title %}天天生鲜-购物车{% endblock title %}
{% block page_title %}购物车{% endblock page_title %}
{% block body %}
	<div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>
    {# 遍历显示用户购物车中商品的记录 #}
    <form method="post" action="{% url 'order:place' %}">
    {% for sku in skus %}
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="sku_ids" value="{{ sku.id }}" checked></li>
		<li class="col02"><img src="{{ sku.image.url }}"></li>
		<li class="col03">{{ sku.name }}<br><em>{{ sku.price }}元/{{ sku.unite }}</em></li>
		<li class="col04">{{ sku.unite }}</li>
		<li class="col05">{{ sku.price }}元</li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl">+</a>
				<input type="text" sku_id="{{ sku.id }}" class="num_show fl" value="{{ sku.count }}">
				<a href="javascript:;" class="minus fl">-</a>	
			</div>
		</li>
		<li class="col07">{{ sku.amount }}元</li>
		<li class="col08"><a href="javascript:;">删除</a></li>
	</ul>
	{% endfor %}

	<ul class="settlements">
        {% csrf_token %}
		<li class="col01"><input type="checkbox" name="" checked=""></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>{{ total_amount }}</em><br>共计<b>{{ total_count }}</b>件商品</li>
		<li class="col04"><input type="submit" value="去结算" style="width: 150px; height: 50px; background-color: #37ab40; font-size: 20px; color: #fff"></li>
	</ul>
    </form>
{% endblock body %}
{% block bottomfiles %}
    <script src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script>
        //计算页面上被选中的商品的总数目和总价格
        function update_page_info() {
            var total_count = 0;
            var total_amount = 0;
            // 获取所有被选中的商品所在的ul元素
            $('.cart_list_td').find(':checked').parents('ul').each(function () {
                // $(this): 被选中的商品的ul元素
                var count = $(this).find('.num_show').val();
                var amount = $(this).children('.col07').text();

                // 累加计算被选中的商品的总数目和总价格
                total_count += parseInt(count);
                total_amount += parseFloat(amount);
            })
            // 重新设置页面上被选中的商品的总数目和总价格
            $('.settlements').find('em').text(total_amount.toFixed(2));
            $('.settlements').find('b').text(total_count);
        }

        // 全选和全不选
        $('.settlements').find(':checkbox').change(function () {
            // 获取全选checkbox选中状态
            var is_checked = $(this).prop('checked');
            // 设置商品对应的checkbox的选中状态
            // 和全选checkbox的选中状态保持一致
            $('.cart_list_td').find(':checkbox').each(function () {
                // $(this):每个商品的checkbox
                $(this).prop('checked', is_checked);
            });

            // 更新页面上被选中的商品的总数目和总价格
            update_page_info();
        })

        // 当商品的checkbox状态发生改变的时候，全选checkbox状态改变
        $('.cart_list_td').find(':checkbox').change(function () {
            // $(this):每个商品的checkbox
            // 获取所有商品checkbox的数目
            var all_len = $('.cart_list_td').find(':checkbox').length;
            // 获取被选中商品checkbox的数目
            var checked_len = $('.cart_list_td').find(':checked').length;
            var is_checked = true;
            if (checked_len < all_len) {
                is_checked = false;
            }
            // 设置全选checkbox的选中状态
            $('.settlements').find(':checkbox').prop('checked', is_checked);

            // 更新页面上被选中的商品的总数目和总价格
            update_page_info();

        })
        // 购物车记录更新前端js通用的流程
        /*
            1) 获取更新的商品id和更新数目
            2) 更新redis中对应的购物车记录，
            // 发起ajax post请求，访问/cart/update, 传递参数: sku_id count
            3) 根据更新的结果进行操作
            3.1 更新成功
                a) 重新设置页面上对应购物车中商品的数目
                b) 重新计算对应商品的小计
                c) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                d) 更新页面上用户购物车中商品的总件数
            3.2 更新失败
                a) 提示错误的信息
         */

        // 更新redis中对应的购物车记录
        var update_error = false; // false代表更新成功
        var cart_count = 0; // 保存用户购物车中商品的总件数
        function update_remote_cart_info(sku_id, count) {
            // 组织参数
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();
            var params = {
                'sku_id': sku_id,
                'count': count,
                'csrfmiddlewaretoken': csrf
            };
            // 设置ajax请求为同步请求
            $.ajaxSettings.async = false;
            // 发起ajax post请求，访问/cart/update, 传递参数: sku_id count
            $.post('/cart/update', params, function (data) {
                // alert('3');
                if (data.res == 5) {
                    // 更新成功
                    update_error = false;
                    cart_count = data.total_count;
                }
                else {
                    // 更新失败
                    update_error = true;
                    alert(data.errmsg);
                }
            });
            // 设置ajax请求为异步请求
            $.ajaxSettings.async = true;
        }

        // 计算商品的小计
        function update_sku_amount(sku_ul) {
            // 获取商品的价格和数量
            var price = sku_ul.children('.col05').text();
            var count = sku_ul.find('.num_show').val();
            // 计算商品的小计
            var amount = parseInt(count)*parseFloat(price);
            // 设置商品的小计
            sku_ul.children('.col07').text(amount.toFixed(2)+'元');
        }

        // 购物车记录增加
        $('.add').click(function () {
            // 获取更新的商品id和更新数目
            var sku_id = $(this).next().attr('sku_id');
            var count = $(this).next().val();
            // 更新redis中对应的购物车记录
            count = parseInt(count) + 1;
            // alert('1');
            update_remote_cart_info(sku_id, count);
            // alert('2');
            // 根据更新的结果进行操作
            if (update_error == false) {
                // 更新成功
                // a) 重新设置页面上对应购物车中商品的数目
                $(this).next().val(count);
                // b) 重新计算对应商品的小计
                var sku_ul = $(this).parents('ul'); // 获取商品所在的ul元素
                update_sku_amount(sku_ul);
                // c) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                var is_checked = sku_ul.find(':checkbox').prop('checked');
                if (is_checked) {
                    update_page_info();
                }
                // d) 更新页面上用户购物车中商品的总件数
                $('.total_count').children('em').text(cart_count);
            }
        })

        // 购物车记录减少
        $('.minus').click(function () {
            // 获取更新的商品id和更新数目
            var sku_id = $(this).prev().attr('sku_id');
            var count = $(this).prev().val();
            // 更新redis中对应的购物车记录
            count = parseInt(count) - 1;
            if (count == 0) {
                return;
            }
            // alert('1');
            update_remote_cart_info(sku_id, count);
            // alert('2');
            // 根据更新的结果进行操作
            if (update_error == false) {
                // 更新成功
                // a) 重新设置页面上对应购物车中商品的数目
                $(this).prev().val(count);
                // b) 重新计算对应商品的小计
                var sku_ul = $(this).parents('ul'); // 获取商品所在的ul元素
                update_sku_amount(sku_ul);
                // c) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                var is_checked = sku_ul.find(':checkbox').prop('checked');
                if (is_checked) {
                    update_page_info();
                }
                // d) 更新页面上用户购物车中商品的总件数
                $('.total_count').children('em').text(cart_count);
            }
        })

        // 购物车商品数目手动输入
        var pre_count = 0;
        $('.num_show').focus(function () {
            // 保存用户输入之前购物车中商品的数目
            pre_count = $(this).val();
        });

        $('.num_show').blur(function () {
            // 获取更新的商品id和更新数目
            var sku_id = $(this).attr('sku_id');
            var count = $(this).val();
            // 校验用户输入的商品的数量
            if (isNaN(count) || count.trim().length==0 || parseInt(count)<=0){
                // 设置购物车中对应商品的数目为用户输入之前的数目
                $(this).val(pre_count);
                return;
            }
            // 更新redis中对应的购物车记录
            // alert('1');
            count = parseInt(count);
            update_remote_cart_info(sku_id, count);
            // alert('2');
            // 根据更新的结果进行操作
            if (update_error == false) {
                // 更新成功
                // a) 重新设置页面上对应购物车中商品的数目
                $(this).val(count);
                // b) 重新计算对应商品的小计
                var sku_ul = $(this).parents('ul'); // 获取商品所在的ul元素
                update_sku_amount(sku_ul);
                // c) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                var is_checked = sku_ul.find(':checkbox').prop('checked');
                if (is_checked) {
                    update_page_info();
                }
                // d) 更新页面上用户购物车中商品的总件数
                $('.total_count').children('em').text(cart_count);
            }
            else {
                // 更新失败
                // 设置购物车中对应商品的数目为用户输入之前的数目
                $(this).val(pre_count);
            }
        })

        // 购物车记录删除js流程
        /*
            1) 获取购物车记录中删除商品的id
            2) 删除redis中对应的购物车记录
            // 发起ajax post请求，访问/cart/delete, 传递参数: sku_id
            3) 根据删除结果进行操作
            3.1 删除成功
                a）移除页面上商品所在的ul
                b) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                c) 重新设置页面上用户购物车中商品的总件数
            3.2 删除失败
                a) 提示错误信息
         */
        $('.cart_list_td').children('.col08').children('a').click(function () {
            // 1) 获取购物车记录中删除商品的id
            var sku_id = $(this).attr('sku_id');
            // 2) 删除redis中对应的购物车记录
            // 获取csrf
            var csrf = $('input[name="csrfmiddlewaretoken"]').val();
            var params = {
                'sku_id': sku_id,
                'csrfmiddlewaretoken': csrf
            };
            // 获取商品所在的ul
            var sku_ul = $(this).parents('ul');
            // 发起ajax post请求，访问/cart/delete, 传递参数: sku_id
            $.post('/cart/delete', params, function (data) {
                if (data.res == 3) {
                    // 删除成功
                    // a）移除页面上商品所在的ul
                    sku_ul.remove(); // 移除自身以及子元素
                    // b) 判断商品是否被选中，如果选中，更新页面上被选中的商品的总数目和总价格
                    var is_checked = sku_ul.find(':checkbox').prop('checked');
                    if (is_checked) {
                        update_page_info();
                    }
                    // c) 重新设置页面上用户购物车中商品的总件数
                    $('.total_count').children('em').text(data.total_count);
                }
                else {
                    // 删除失败
                    alert(data.errmsg);
                }
            })
        })
    </script>
{% endblock bottomfiles %}
